{% raw %}
    <div class="flex flex-1 flex-col overflow-y-auto">
        <div class="flex flex-shrink-0 items-center">
            <h1 class="text-3xl font-bold text-gray-900">Settings</h1>
        </div>
        <nav aria-label="Sidebar">
            <div class="mt-4 mb-2">
                <span class="text-sm text-gray-600 font-medium">Personal settings</span>
            </div>
            <div class="py-2 space-y-1 border-b-2 border-gray-200">
                {% if current_tab == "account" %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:account-settings' %}"
                       class="bg-blue-300 hover:bg-blue-400 text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                        Your account
                    </a>
                {% else %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:account-settings' %}"
                       class="text-gray-800 hover:bg-blue-400 hover:text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-gray-800 group-hover:text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                        Your account
                    </a>
                {% endif %}
                {% if current_tab == "security" %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:security-settings' %}"
                       class="bg-blue-300 hover:bg-blue-400 text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                        Password
                    </a>
                {% else %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:security-settings' %}"
                       class="text-gray-800 hover:bg-blue-400 hover:text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-gray-800 group-hover:text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m0-10.036A11.959 11.959 0 013.598 6 11.99 11.99 0 003 9.75c0 5.592 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.31-.21-2.57-.598-3.75h-.152c-3.196 0-6.1-1.249-8.25-3.286zm0 13.036h.008v.008H12v-.008z" />
                        </svg>
                        Password
                    </a>
                {% endif %}
                {% if current_tab == "email" %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:email-settings' %}"
                       class="bg-blue-300 hover:bg-blue-400 text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                        </svg>
                        Emails
                    </a>
                {% else %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-auth:email-settings' %}"
                       class="text-gray-800 hover:bg-blue-400 hover:text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-gray-800 group-hover:text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
                        </svg>
                        Emails
                    </a>
                {% endif %}
            </div>
            <div class="mt-4 mb-2">
                <span class="text-sm text-gray-600 font-medium">Billing settings</span>
            </div>
            <div class="space-y-1">
                {% if current_tab == "billing" %}
                    <a href=""
                       class="bg-blue-300 hover:bg-blue-400 text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                        </svg>
                        Billing and plans
                    </a>
                {% else %}
                    <a href="{% url '{%- endraw -%}{{ cookiecutter.project_slug }}{%- raw -%}-billing:billing-settings' %}"
                       class="text-gray-800 hover:bg-blue-400 hover:text-black group flex items-center px-2 py-2 text-base font-medium rounded">
                        <svg xmlns="http://www.w3.org/2000/svg"
                             fill="none"
                             viewBox="0 0 24 24"
                             stroke-width="1.5"
                             stroke="currentColor"
                             class="text-gray-800 group-hover:text-black mr-3 h-6 w-6">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 18.75a60.07 60.07 0 0115.797 2.101c.727.198 1.453-.342 1.453-1.096V18.75M3.75 4.5v.75A.75.75 0 013 6h-.75m0 0v-.375c0-.621.504-1.125 1.125-1.125H20.25M2.25 6v9m18-10.5v.75c0 .414.336.75.75.75h.75m-1.5-1.5h.375c.621 0 1.125.504 1.125 1.125v9.75c0 .621-.504 1.125-1.125 1.125h-.375m1.5-1.5H21a.75.75 0 00-.75.75v.75m0 0H3.75m0 0h-.375a1.125 1.125 0 01-1.125-1.125V15m1.5 1.5v-.75A.75.75 0 003 15h-.75M15 10.5a3 3 0 11-6 0 3 3 0 016 0zm3 0h.008v.008H18V10.5zm-12 0h.008v.008H6V10.5z" />
                        </svg>
                        Billing and plans
                    </a>
                {% endif %}
            </div>
        </nav>
    </div>
{% endraw %}